<template>
	<view>
		<!-- 封装头部 -->
		<NavBar text='消化内科' background="linear-gradient(#0c8efc, #00b8fe)" height='40'>
			<template slot='title'>
				<!-- <u-icon name='list' size='28rpx' color="#fff"></u-icon> -->
				<u-icon name="list" color="#fff" size="28"></u-icon>
			</template>
		</NavBar>
		<view style="width: 100%; height: 150rpx;"></view>
		<!-- tab选择 -->
		<view>
			<scroll-view class="scroll-view_H" scroll-x="true">
				<view v-for="(item,index) in list1" :key="index" :class="{onstyle: true}" @click="TabClick(index)">
					<view :class="{fontText: true, selectStyle: arrltery == index}">{{item.name}}</view>
					<view :class="{fontText: true, selectStyle: arrltery == index}">{{item.date}}</view>
					<view :class="{borderStyle: arrltery == index}"></view>
				</view>
			</scroll-view>
		</view>

		<view style="width: 100%; height: 1rpx; background-color: #e8e8e8;"></view>
		<view>
			<view style="width: 90%; margin:0 auto;" class="flx1">
				<view :class="{borderStyles: true, select: arrltery2 == indexy}" v-for="(items,indexy) in list2"
					:key="indexy" @click="tableter(indexy)">
					<view>{{items.name}}</view>
					<view :class="{selectxz: arrltery2 == indexy}"></view>
				</view>
			</view>
		</view>
		<view v-if="arrltery2 == 0">
			<view class="arrlteryS" v-for="(item,index) in ArrayList" :key="index" @click="navclick(item)">
				<view class="arrlterySk">
					<view class="arrlteryS_ flx">
						<view class="flx1">
							<view class="arrlteryS_Image">
								<image :src="item.Images"></image>
							</view>
							<view class="arrlteryS_text">
								<view class="flx1">
									<view class="arrlteryS_text_one">{{item.name}}</view>
									<view class="arrlteryS_text_two">{{item.zw}}</view>
									<view style="margin-left: 20rpx;"></view>
									<u-tag text="服务包" bgColor='#d6366b' size="mini" v-if="item.status == 0"  borderColor='#d6366b'></u-tag>
								</view>
								<view class="flx1 arrlteryS_textpf">
									<view class="arrlteryS_textpf_pf">评分 {{item.pf}}</view>
									<view class="arrlteryS_textpf_yy">预约量 {{item.number}}</view>
								</view>
							</view>
						</view>
						<view>
							<!-- <view class="ym"></view> -->
							<u-tag v-if="item.isman == false" text="今日已满" plain size="mini" type="warning" borderColor='#dedede' color="#a9a9a9"></u-tag>
						</view>
					</view>
					<view class="text u-line-2">擅长：{{item.text}}</view>
				</view>
			</view>
		</view>
		<view v-if="arrltery2 == 1">
			<view class="arrlteryS" v-for="(item,index) in ArrayList" :key="index">
				<view class="arrlterySk"  @click="navclick(item)">
					<view class="arrlteryS_ flx">
						<view class="flx1">
							<view class="arrlteryS_Image">
								<image :src="item.Images"></image>
							</view>
							<view class="arrlteryS_text">
								<view class="flx1">
									<view class="arrlteryS_text_one">{{item.name}}</view>
									<view class="arrlteryS_text_two">{{item.zw}}</view>
									<view style="margin-left: 20rpx;"></view>
										<u-tag text="服务包" bgColor='#d6366b' size="mini" v-if="item.status == 0"  borderColor='#d6366b'></u-tag>
								</view>
								<view class="flx1 arrlteryS_textpf">
									<view class="arrlteryS_textpf_pf">评分 {{item.pf}}</view>
									<view class="arrlteryS_textpf_yy">预约量 {{item.number}}</view>
								</view>
							</view>
						</view>
						<view>
							<!-- <view class="ym"></view> -->
							<u-tag v-if="item.isman == false" text="今日已满" plain size="mini" type="warning" borderColor='#dedede' color="#a9a9a9"></u-tag>
						</view>
					</view>
					<view class="text u-line-2">擅长：{{item.text}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import NavBar from '@/components/NarBar.vue'
	export default {
		components: {
			NavBar
		},
		data() {
			return {
				arrltery: 0,
				arrltery2: 0,
				list1: [{
					name: '周一',
					date: '06.24'
				}, {
					name: '周二',
					date: '06.25'
				}, {
					name: '周三',
					date: '06.26'
				}, {
					name: '周四',
					date: '06.27'
				}, {
					name: '周五',
					date: '06.28'
				}, {
					name: '周六',
					date: '06.29'
				}, {
					name: '周日',
					date: '06.30'
				}, {
					name: '周一',
					date: '06.31'
				}, {
					name: '周二',
					date: '07.01'
				}],
				list2: [{
						name: '普通门诊',
					},
					{
						name: '专家门诊',
					}
				],
				ArrayList: [{
						Images: '/static/reservationRegister/userheader.png',
						name: '李一航',
						zw: '主任医师',
						status: 0,
						pf: '10.0',
						number: '10',
						isman: true,
						text: '擅长胃炎、胃食管反流病、消化性溃疡、肝硬化、擅长胃炎、胃食管反流病、消化性溃疡、肝硬化、十二指肠溃疡、发烧、感冒'
					},
					{
						Images: '/static/reservationRegister/userheader.png',
						name: '赵果',
						zw: '主任医师',
						status: 1,
						pf: '9.6',
						number: '100',
						isman: false,
						text: '擅长发烧、感冒、急性流感'
					},
					{
						Images: '/static/reservationRegister/userheader.png',
						name: '王银斯',
						zw: '主任医师',
						status: 0,
						pf: '9.5',
						number: '101',
						isman: false,
						text: '呼吸道疾病，咳嗽，季节性过敏源'
					},
					{
						Images: '/static/reservationRegister/userheader.png',
						name: '孙艺珍',
						zw: '主任医师',
						status: 0,
						pf: '9.4',
						number: '12',
						isman: false,
						text: '擅长丘麻疹，带状疱疹'
					},
					{
						Images: '/static/reservationRegister/userheader.png',
						name: '李斯',
						zw: '主任医师',
						status: 0,
						pf: '9.0',
						number: '100',
						isman: false,
						text: '擅长皮肤癣、皮肤晒伤等疾病'
					}
				]
			}
		},
		methods: {
			TabClick(index) {
				this.arrltery = index
			},
			tableter(index) {
				this.arrltery2 = index
			},
			navclick(item){	
				console.log(item);
				var str = JSON.stringify(item)
				console.log(str);
				uni.navigateTo({
					url:'/pages/reservationRegister/DoctorDetails?datas=' + encodeURIComponent(JSON.stringify(item))
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.scroll-view_H {
		white-space: nowrap;
		width: 100%;
	}

	.onstyle {
		margin-top: 10rpx;
		display: inline-block;
		margin-left: 25rpx;

		.fontText {
			font-size: 25rpx;
			color: #333;
			text-align: center;
			margin-top: 8rpx;
			font-weight: 600;
			letter-spacing: 1rpx;
		}

		.selectStyle {
			color: #50a6cb;
		}

		.borderStyle {
			width: 25rpx;
			height: 10rpx;
			margin: 0 auto;
			margin-top: 10rpx;
			background-color: #50a6cb;
			border-radius: 20rpx;
		}
	}

	.borderStyles {
		width: 50%;
		text-align: center;
		font-size: 30rpx;
		font-weight: 600;
		letter-spacing: 1rpx;
		color: #333;
		margin-top: 20rpx;

		.selectxz {
			width: 25rpx;
			height: 10rpx;
			margin: 0 auto;
			margin-top: 10rpx;
			background-color: #50a6cb;
			border-radius: 20rpx;
		}
	}

	.select {
		color: #50a6cb;
	}
	.arrlteryS{
		width: 100%;
		marign:0 auto;
		margin-top:20rpx;
		border-bottom: 1rpx solid #e8e8e8;
		padding: 20rpx;
		.arrlterySk{
			width: 90%;
			margin: 0 auto;
			.arrlteryS_Image{
				width: 100rpx;
				height: 100rpx;
				border-radius: 50%;
				image{
					width: 100%;
					height: 100%;
				}
			}
			.arrlteryS_text{
				margin-left: 20rpx;
				.arrlteryS_text_one{
					font-size: 35rpx;
					color: #333;
					font-weight: 600;
				}
				.arrlteryS_text_two{
					font-size: 25rpx;
					color: #333;
					margin-top:10rpx;
					margin-left: 20rpx;
				}
				.arrlteryS_text_three{
					padding: 5rpx;
					border-radius: 6rpx;
					color: #fff;
					background-color: #d6366b;
					font-size: 15rpx;
					margin-left: 20rpx;
					letter-spacing: 1rpx;
				}
			}
			.arrlteryS_textpf{
				margin-top: 20rpx;
				.arrlteryS_textpf_pf{
					font-size: 25rpx;
					font-weight: 600;
				}
				.arrlteryS_textpf_yy{
					margin-left:20rpx;
					font-size: 25rpx;
					font-weight: 600;
				}
			}
			.ym{
				font-size: 25rpx;
			}
		}
		.text{
			margin-top:20rpx;
			font-size: 25rpx;
			letter-spacing: 1rpx;
			font-weight: 600;
		}
	}
</style>